var arr = [];
var cartArr = [];
//页面加载完毕 执行
window.onload = function() {
    console.log("onload");
    if (localStorage.dataObj) {
        arr = JSON.parse(localStorage.dataObj);
        console.log("arr:", arr);

        showGoodsList(arr);
        show(getData());
    }

    function showGoodsList(arr) {
        var list_ul = document.querySelector(".list_ul");
        list_ul.innerHTML = "";

        for (var i = 0; i < arr.length; i++) {
            list_ul.innerHTML += `
                <li data-id="${ arr[i].goodsid }">
                    <img src="${ arr[i].image }" >
                    <div class="good_title mt5">
                        ${ arr[i].name }
                    </div>
                    <div class="price mt5">
                        ${ arr[i].price }元
                    </div>
                    <button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
                        加入购物车
                    </button>
                </li>`;
        }
    }
}

//添加购物车
function addCart(goodsId, img, goodsName, price) {
    var count = 1;
    var xiaoji = Number(price) * Number(count);
    var obj = {
        id: goodsId,
        src: img,
        title: goodsName,
        price: price,
        count: count,
        xiaoji: xiaoji.toFixed(2),
        time: new Date().toLocaleTimeString().slice(2)
    }
    addData(obj);
    show(getData());
}

//添加数据到购物车
function addData(obj) {

    carArr = getData();

    var result = carArr.some(function(item, index) {
        return item.id === obj.id;
    })
    console.log("result:", result);
    if (result) {
        console.log("has");
        jia(obj.id);
        return;
    }
    console.log("no");
    carArr.push(obj);

    localStorage.cartArr = JSON.stringify(cartArr);
}

//获取数据
function getData() {
    cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
    return cartArr;
}

//渲染购物车
function show(cartArr) {
    console.log("cartArr", cartArr);
    var tbody = document.querySelector('tbody');
    tbody.innerHTML = "";
    var str = "";
    var sum = 0;

    for (var i = 0; i < cartArr.length; i++) {
        str +=
            `<tr>
					<td>
						<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
					</td>
					<td>
						<p>
							<img src="${ cartArr[i].src }" >
							<br>
							<span>${ cartArr[i].title }</span>
						</p>
					</td>
					<td>
						<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
						<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
						<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
					</td>
					<td>
						<span>${ cartArr[i].price }元</span>
					</td>
					<td>
						${ cartArr[i].xiaoji }
					</td>
					<td>
						<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
					</td>
					<td>
						${ cartArr[i].time }
					</td>
					
				</tr>`;
        //总价格的计算
        sum = sum / 1 + cartArr[i].xiaoji / 1;
    }
    tbody.innerHTML = str;
    document.getElementById("sum").innerHTML = sum;
}


//点击加
function jia(id) {
    console.log("id", id);
    carArr = getData();
    carArr.forEach(function(item, index) {
        if (item.id == id) {
            item.count++;
            item.xiaoji = (item.count * item.price).toFixed(2);
        }
    })
    localStorage.cartArr = JSON.stringify(cartArr);
    show(getData());
}

//点击减
function jian(id) {
    carArr = getData();
    carArr.forEach(function(item, index) {
        if (item.id == id) {
            if (item.count > 1) {
                item.count--;
                item.xiaoji = (item.count * item.price).toFixed(2);
            }
        }
    })
    localStorage.cartArr = JSON.stringify(cartArr);
    show(getData());
}

//删除
function del(id) {
    delData(id);
    show(getData());
}

function delData(id) {
    cartArr = getData();
    cartArr = cartArr.filter(function(item, index) {
        return item.id != id
    })

    localStorage.cartArr = JSON.stringify(cartArr);
}

//全选
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function() {
    var danxuan = document.querySelectorAll(".danxuan");
    for (var i = 0; i < danxuan.length; i++) {
        danxuan[i].checked = quanxuan.checked;
    }
}

//删除选中商品
var delChecked = document.getElementById("delChecked");
delChecked.onclick = function() {
    cartArr = getData();

    var danxuan = document.querySelectorAll(".danxuan:checked");
    for (var i = 0; i < danxuan.length; i++) {
        cartArr.forEach(function(item, index) {
            if (item.id === danxuan[i].getAttribute("data-id")) {
                cartArr.splice(index, 1);
            }
        })
    }
    localStorage.cartArr = JSON.stringify(cartArr);
    show(getData());
}